import * as React from 'react';
import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
import Albums from './Shared/Albums';
import Article from './Shared/Article';
import Contacts from './Shared/Contacts';
import Chat from './Shared/Chat';
import { Text, View, StyleSheet } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
// @ts-ignore
import TouchableBounce from 'react-native/Libraries/Components/Touchable/TouchableBounce';

const TabBarIconSizeConfig = {
  size: 17, // 默认大小
  getSize: function () {
    return this.size;
  },
  setSize: function (newSize: number) {
    this.size = newSize;
  },
};

const tabBarIcon =
  (name: string) =>
  ({ tintColor, horizontal }: { tintColor: string; horizontal: boolean }) => (
    <MaterialIcons
      name={name}
      color={tintColor}
      size={TabBarIconSizeConfig.getSize() || (horizontal ? 17 : 24)}
    />
  );

// 返回上一页
class GoBackScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'GoBack',
    tabBarIcon: tabBarIcon('arrow-back'),
    // tabBarButtonComponent: TouchableBounce,
    tabBarOnPress: ({ navigation, defaultHandler }) => {
      defaultHandler();
      // 自定义操作
      console.log('tabBarOnPress');
      navigation.navigate('Home');
    },
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>点击GoBack返回主页</Text>
      </View>
    );
  }
}

class AlbumsScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Albums',
    tabBarIcon: tabBarIcon('photo-album'),
    tabBarButtonComponent: TouchableBounce,
    tabBarOnPress: ({ navigation, defaultHandler }) => {
      defaultHandler();
      // 自定义操作
      console.log('tabBarOnPress');
    },
  };

  render() {
    return <Albums />;
  }
}

class ArticleScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Article',
    tabBarIcon: tabBarIcon('chrome-reader-mode'),
    tabBarButtonComponent: TouchableBounce,
  };

  render() {
    return <Article />;
  }
}

class ContactsScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Contacts',
    tabBarIcon: tabBarIcon('contacts'),
    tabBarButtonComponent: TouchableBounce,
  };

  render() {
    return <Contacts />;
  }
}

class ChatScreen extends React.Component {
  static navigationOptions = {
    title: 'ChatTitle',
    tabBarIcon: tabBarIcon('chat-bubble'),
    tabBarButtonComponent: TouchableBounce,
  };

  render() {
    return <Chat />;
  }
}

// 2. 定义占位组件（未激活标签时显示）
const LazyPlaceholder = ({ route }) => {
  // 接收 route props，可显示当前标签名称

  return (
    <View style={lazyPlaceholderstyles.placeholder}>
      <Text style={lazyPlaceholderstyles.placeholderText}>
        加载中...（{route.name} 标签未激活）
      </Text>
    </View>
  );
};

const lazyPlaceholderstyles = StyleSheet.create({
  screen: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  placeholder: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  placeholderText: { color: '#999', fontSize: 14 },
});

const MaterialTopTabs = createMaterialTopTabNavigator(
  {
    Albums: {
      screen: AlbumsScreen,
    },
    Article: {
      screen: ArticleScreen,
    },
    Contacts: {
      screen: ContactsScreen,
    },
    Chat: {
      screen: ChatScreen,
    },
    GoBack: {
      screen: GoBackScreen,
    },
  },
  {
    order: ['Albums', 'Article', 'Contacts', 'Chat', 'GoBack'],
    // initialRouteName: 'Chat',
    // lazy: true, // 懒加载（仅在需要时加载屏幕）
    backBehavior: 'order',
    tabBarOptions: {
      style: {
        backgroundColor: '#968cb6ff', // 标签栏背景颜色
      },
      labelStyle: {
        fontSize: 8, // 标签文字大小
      },
      tabStyle: {
        // width: 130, // 标签宽度
        paddingTop: 50,
        height: 100, // 标签高度
        // backgroundColor: 'yellow', // 标签栏背景颜色（选中）
      },
      activeTintColor: 'yellow', // 标签文字颜色（选中）
      inactiveTintColor: 'pink', // 标签文字颜色（未选中）
      showIcon: true, // 是否显示图标
      showLabel: true, // 是否显示标签文字
      upperCaseLabel: true, // 是否将标签文字转换为大写
      pressColor: 'black', // 设置安卓设备上标签被点击时的水波纹颜色(Android >= 5.0 only)
      pressOpacity: 0.3, // 标签点击时的透明度（0-1）
      scrollEnabled: false, // 是否允许标签栏滚动
      indicatorStyle: {
        backgroundColor: 'yellow', // 标签栏指示器颜色（底部高亮条）
        height: 5, // 标签栏指示器高度
        // width: 100
      },
      iconStyle: {
        fontSize: TabBarIconSizeConfig.setSize(15), // 标签栏图标大小
      },
      allowFontScaling: true, 
    },
    tabBarPosition: 'top', // 标签栏位置（顶部）
    swipeEnabled: true, // 开启滑动切换标签功能
    swipeDistanceThreshold: 1, 
    swipeVelocityThreshold: 1, 
    initialLayout: { width: '150', height: '300' }, 
    lazy: false, // 懒加载（仅在需要时加载屏幕）
    lazyPlaceholderComponent: LazyPlaceholder, // 配置占位组件
    onSwipeStart: () => {
      // 滑动开始时调用
      console.log('onSwipeStart:', '开始滑动');
    },
    onSwipeEnd: () => {
      // 滑动结束时调用
      console.log('onSwipeEnd:', '滑动结束');
    },
  },
);

export default MaterialTopTabs;